<template>
	<view class="info-item" :style="{ marginBottom: `${gap}rpx` }">
		<view class="title">{{ title }}</view>
		<view class="value" :style="{ color }" @click="copyValue">
			<slot name="value">
				<view class="flex-a flex-j-end">
					{{ value || (value as any) === 0 ? value : "-" }}
					<image v-if="copy" :src="imgBaseUrl + 'icon-copy.png'" class="icon-32 ml-8" />
				</view>
			</slot>
		</view>
	</view>
</template>

<script setup lang="ts">
import { copyData } from "@/utils/tools"

const imgBaseUrl = inject("imgBaseUrl")

const props = defineProps({
	title: {
		type: String,
		default: "",
	},
	value: {
		validator: (value) => typeof value === "string" || typeof value === "number",
		default: "",
	},
	gap: {
		type: [String, Number] as PropType<string | number>,
		default: "28",
	},
	color: {
		type: String,
		default: "#1D2129",
	},
	copy: {
		type: Boolean,
		default: false,
	},
})
const copyValue = () => {
	if (!props.copy) {
		return
	}
	copyData(props.value)
}
</script>

<style scoped lang="scss">
.info-item {
	line-height: 40rpx;
	font-size: 28rpx;
	display: flex;
	.title {
		width: 30%;
		color: $c-grey-4e;
	}
	.value {
		width: 70%;
		text-align: right;
	}
}
</style>
